
/*功率因素*/
Vue.component('chartComponent',{
    props:[],
    'template':`
		<div>
		    <slot name="line"></slot>
			<div :id="chartId" class="chartBox" ></div>
		</div>
	`,
    /*computed:{
     chartLine:function(){
     return this.subchart
     }
     },*/
    data:function(){
        return {
            chartId:'chart_'+this.uuid(8, 64),
            myChart:null,
            dataX:[1,2,3,4,5,6],
            dataArr:[]
        }
    },
    watch:{

    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.init();
            _this.triggerEvent();
        });
    },
    methods:{
        uuid:function(len, radix) {
            //uuid函数，为chart设置id熟悉
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
                i;
            radix = radix || chars.length;
            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                // rfc4122, version 4 form
                var r;
                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                // Fill in random data. At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        },
        getEventObject:function(slotName){
            //将传过来的数据处理成echart需要的数据格式
            //输出x轴，y轴，legend属性
            var lines=this.$slots[slotName];
            var legend=[];
            var series=[];
            var ajaxData=[];
            var dataX=this.dataX;
            var timing=[];
            for(var i=0;i<lines.length;i++){
                //初始化图表相关的数据
                series.push({
                    name:lines[i].data.attrs['name'],
                    type:lines[i].data.attrs['type'],
                    lineStyle:{
                        normal:{
                            color:lines[i].data.attrs['linecolor']
                        }
                    }
                });
                legend.push(lines[i].data.attrs.name);
                //ajax相关的数据
                ajaxData.push({
                    url:lines[i].data.attrs['itemurl'],
                    params:lines[i].data.attrs['params']
                });

                //定时轮询相关的数据
                timing.push(Number(lines[i].data.attrs['timing']))
            }
            return {
                dataX:this.dataX,
                series:series,
                legend:legend,
                ajaxData:ajaxData,
                timing:timing
            }
        },
        handleData:function(ajaxData,name,series){
            var _this=this;
            //var URL='http://cqwind.chinacloudapp.cn:8381?';
            var dataArrX=[];
            var dataArrY=[];
            var success=function(res){
                    series.data = res.data;
                _this.loadData(name,series.data.dateTime,series.data.powerFactor);

            };
            var error=function(e){
                console.log(e);
            };
            this.$http.get(URL+ajaxData['url'],{}).then(success,error);
        },
        triggerEvent:function(){
            var eventObject=this.getEventObject('line');
            var _this=this;
            var num=0;
            setInterval(function(){
                num++;
                num%=eventObject.ajaxData.length;
                _this.handleData(eventObject.ajaxData[num],eventObject.legend[num],eventObject.series[num]);
            },eventObject.timing[num]);
        },
        init:function(){
            var chartData = this.getEventObject('line')
            var option={
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#2f2f30',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                legend: []
                /*{
                 orient: 'vertical',
                 right: '5%',
                 itemWidth: 10,
                 itemHeight: 10,
                 data: []
                 }*/,
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2d2d2d',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    name: '时间',
                    type: 'category',
                    boundaryGap: false,
                    data:[],// data.T_Time,
                    //data:['2018/12/13', '2018/12/14','2018/12/15', '2018/12/16', '2018/12/17', '2018/12/18','2018/12/19'],
                    axisLine: {
                        lineStyle: {
                            color: '#2d2d2d'
                        }
                    },
                    /*axisTick: {
                        interval: 'auto'
                    },*/
                    nameTextStyle: {
                        color: '#fff'
                    }
                },
                yAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            type: 'solid',
                            width: 1,
                            opacity: 0.1
                        }
                    },
                    //max:1,
                    axisLine: {
                        lineStyle: {
                            color: '#2e2d2e'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#e6e6e6'
                        }
                    }
                }, {
                    position: 'right',
                    offset: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#2e2d2e'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }],
                /*toolbox: {
                 show: true,
                 left:'45%',
                 top:'0%',
                 itemGap:15,
                 feature: {
                 dataZoom: {
                 yAxisIndex: 'none'
                 },
                 restore: {}
                 }
                 },*/
                series:chartData.series,
            };
            this.myChart= echarts.init(document.getElementById(this.chartId));
            this.showLoad();
            this.myChart.setOption(option);
        },
        showLoad:function(){
            var loadingConfig={
                text: '',
                color: '#b0e9fe',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
                zlevel: 0
            };
            this.myChart.showLoading(loadingConfig);
        },
        hideLoad:function(){
            this.myChart.hideLoading();
        },
        loadData:function(name,dataX,dataY){
            var _this=this;
            this.hideLoad();
            this.myChart.setOption({
                xAxis: {
                     data:dataX
                    /*['2017/3/15', '2017/3/16', '2017/3/17', '2017/3/18','2017/3/19', '2017/3/20', '2017/3/21'],*/
                },
                lenged:_this.lenged,
                series:[{
                    name:name,
                    data:dataY
                }]
            })
        }
    }

});
